<div id="group-creation-modal" data-bind="with: $root.groupCreation" class="group-creation-modal modal modal-large">
  <div class="modal-content group-creation-modal-content">
    <div class="modal-header group-creation-modal-header">
      <!-- ko if: stateIsParticipants() -->
        <div class="group-creation-header-block">
          <span class="button-icon icon-back" data-bind="click: clickOnBack" data-uie-name="go-back"></span>
        </div>
        <span class="label-xs group-creation-modal-title" data-bind="text: participantsHeaderText" data-uie-name="status-people-selected"></span>
        <div class="group-creation-header-block">
          <span class="group-creation-modal-action text-theme pull-right enabled" data-bind="click: clickOnCreate, text: participantsActionText" data-uie-name="do-create-group"></span>
        </div>
      <!-- /ko -->
      <!-- ko if: stateIsPreferences() -->
        <div class="group-creation-header-block">
          <span class="button-icon icon-close" data-bind="click: clickOnClose" data-uie-name="do-close"></span>
        </div>
        <span class="label-xs group-creation-modal-title" data-bind="l10n_text: z.string.groupCreationPreferencesHeader"></span>
        <div class="group-creation-header-block">
          <span class="group-creation-modal-action pull-right" data-bind="click: clickOnNext, css: {'text-theme': nameInput().length, 'enabled': nameInput().length}, enable: nameInput().length, l10n_text: z.string.groupCreationPreferencesAction" data-uie-name="go-next"></span>
        </div>
      <!-- /ko -->
    </div>
    <!-- ko if: stateIsParticipants -->
      <user-input class="group-creation-modal-participants-input user-list-light" params="input: participantsInput, selected: selectedContacts, placeholder: z.string.groupCreationParticipantsPlaceholder, enter: clickOnCreate" spellcheck="false"></user-input>
    <!-- /ko -->
    <div class="modal-center group-creation-modal-center">
      <!-- ko if: stateIsParticipants() -->
        <div class="group-creation-list-wrapper" data-bind="antiscroll: shouldUpdateScrollbar">
          <user-list class="group-creation-modal-participants-list user-list-light" params="user: contacts, filter: participantsInput, selected: selectedContacts"></user-list>
        </div>
      <!-- /ko -->
      <!-- ko if: stateIsPreferences() -->
        <input class="input group-creation-modal-teamname-input" autofocus autocomplete="off" maxlength="64" required spellcheck="false" type="text" data-bind="textInput: nameInput, hasFocus: true, l10n_placeholder: z.string.groupCreationPreferencesPlaceholder, enter: clickOnNext" data-uie-name="enter-group-name">
        <div class="group-creation-error" data-bind="text: nameError, visible: nameError().length" data-uie-name="error-group-name"></div>
        <!-- ko if: isTeam -->
          <guest-mode-toggle params="isChecked: isGuestRoom, onToggle: clickOnToggleGuestMode, extendedInfo: true"></guest-mode-toggle>
        <!-- /ko -->
      <!-- /ko -->
    </div>
  </div>
</div>
